<template>
  <div class="pageBox">
    <head-component title="区域地图"></head-component>
    <div class="content" id="container"></div>
  </div>
</template>
<script type="text/ecmascript-6">
import { defineComponent, onMounted } from "vue";
import headComponent from "../../components/headComponent.vue";
import BMapGL from "BMapGL";

export default defineComponent({
  components: {
    headComponent,
  },
  setup() {
    // 绘制百度地图标点
    function drawMap() {
      var map = new BMapGL.Map("container");
      map.centerAndZoom(new BMapGL.Point(116.404, 39.928), 15);
      map.enableScrollWheelZoom(true);
      // 创建点标记
      var marker1 = new BMapGL.Marker(new BMapGL.Point(116.404, 39.925));
      var marker2 = new BMapGL.Marker(new BMapGL.Point(116.404, 39.915));
      var marker3 = new BMapGL.Marker(new BMapGL.Point(116.395, 39.935));
      var marker4 = new BMapGL.Marker(new BMapGL.Point(116.415, 39.931));
      // 在地图上添加点标记
      map.addOverlay(marker1);
      map.addOverlay(marker2);
      map.addOverlay(marker3);
      map.addOverlay(marker4);
    }
    onMounted(() => {
      drawMap();
    });
    return {
      drawMap,
    };
  },
});
</script>

<style scoped lang="less">
.pageBox {
  width: 100%;
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-top: 88px;
  .content {
    width: 100%;
    height: calc(100vh - 88px);
  }
}
</style>